<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="avatar"></el-avatar>
        <i class="el-dropdown-link" >用户的名</i>

        <span>梦创科技有限公司</span>

        <el-button type="button">注销账号</el-button>
      </el-header>
<!-- 轮播图 -->
      <el-main class="slideshow">
        <div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in imagesbox" :key="item.id">
              <img :src="item.idView" class="image" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="搜索">
              <el-input
                v-model="formInline.user"
                placeholder="请输入关键词"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <!-- 文章缩略图等内容 -->

      <el-main class="content">
        <!-- 新闻热点资讯栏 -->
        <el-card class="newscord">
          <div class="news">
            <div class="newsbtndiv">
              <el-button round class="newsbtn" @click="NewsHotspot()"
                >新闻热点</el-button
              >
            </div>

            <div class="newsbtndiv">
              <el-button round class="newsbtn" @click="CompanyDynamics()"
                >公司动态</el-button
              >
            </div>

            <div class="newsbtndiv">
              <el-button round class="newsbtn" @click="BigBrother()"
                >大神风采</el-button
              >
            </div>

            <div class="newsbtndiv">
              <el-button round class="newsbtn" @click="UnderstandUs()"
                >了解我们</el-button
              >
            </div>
          </div>
        </el-card>
        <!-- 新闻热点资讯栏 -->

        <div class="smallmain">
          <div class="ranking">
            <el-card class="box-cardrightone">
              <el-breadcrumb separator>
                <el-breadcrumb-item>
                  <a href=""></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href=""></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href=""></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/WARranking' }"
                  >一周的阅读排行</el-breadcrumb-item
                >
                <div class="more">
                  <li>
                    <a href="/WARranking" style="text-decoration: none">更多</a>
                  </li>
                </div>
              </el-breadcrumb>
            </el-card>

            <el-card class="box-cardrighttwo">
              <el-breadcrumb separator>
                <el-breadcrumb-item>
                  <a href="/"></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="/"></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="/"></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/WArecommendation' }"
                  >小编的周推</el-breadcrumb-item
                >
                <div class="more">
                  <li>
                    <a href="/WArecommendation" style="text-decoration: none">更多</a>
                  </li>
                </div>
              </el-breadcrumb>
            </el-card>

            <el-card class="box-cardrightthree">
              <el-breadcrumb separator>
                <el-breadcrumb-item>
                  <a href="/"></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="/"></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="/"></a>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/WALranking' }"
                  >一周内评论最多</el-breadcrumb-item
                >
                <div class="more">
                  <li>
                    <a href="/WALranking" style="text-decoration: none">更多</a>
                  </li>
                </div>
              </el-breadcrumb>
            </el-card>
          </div>

          <el-card class="box-cardone">
            <div class="demo-image" >
              <div>
                <el-image
                  @click="Photo"
                  style="width: 25%; height: 160px"
                  :src="urlone"
                ></el-image>

                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>文章标题</span>
                  </div>
                  <div class="articletext">文章简介</div>
                  <div class="quantity">
                    <el-badge :value="12" class="item">
                       <span>点赞数量</span>
                    </el-badge>
                    <el-badge :value="3" class="item">
                      <span>评论数量</span>
                    </el-badge>
                    <el-badge :value="1" class="item" type="primary">               
                      <span>阅读数量</span>
                    </el-badge>
                    <el-badge :value="2" class="item" type="warning">
                      <span>发布日期</span>
                    </el-badge>

                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        点我查看
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="clearfix">
                          评论
                          <el-badge class="mark" :value="12" />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix">
                          回复
                          <el-badge class="mark" :value="3" />
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-card>
              </div>
            </div>
          </el-card>

          <el-card class="box-cardone">
            <div class="demo-imagetwo" >
              <div>
                <el-image
                  @click="Phototwo"
                  style="width: 25%; height: 160px"
                  :src="urltwo"
                ></el-image>

                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>文章标题</span>
                  </div>
                  <div class="articletext">文章简介</div>
                  <div class="quantity">
                    <el-badge :value="12" class="item">
                     <span>点赞数量</span>
                    </el-badge>
                    <el-badge :value="3" class="item">
                      <span>评论数量</span>
                    </el-badge>
                    <el-badge :value="1" class="item" type="primary">
                      <span>阅读数量</span>
                    </el-badge>
                    <el-badge :value="2" class="item" type="warning">
                      <span>发布日期</span>
                    </el-badge>

                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        点我查看
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="clearfix">
                          评论
                          <el-badge class="mark" :value="12" />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix">
                          回复
                          <el-badge class="mark" :value="3" />
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-card>
              </div>
            </div>
          </el-card>

          <el-card class="box-cardone">
            <div class="demo-imagethree" >
              <div>
                <el-image
                  @click="Photothree" 
                  style="width: 25%; height: 160px"
                  :src="urlthree"
                ></el-image>

                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>文章标题</span>
                  </div>
                  <div class="articletext">文章简介</div>
                  <div class="quantity">
                  <el-badge :value="12" class="item">
                    <span>点赞数量</span>
                  </el-badge>
                  <el-badge :value="3" class="item">
                    <span>评论数量</span>
                  </el-badge>
                  <el-badge :value="1" class="item" type="primary">
                    <span>阅读数量</span>
                  </el-badge>
                  <el-badge :value="2" class="item" type="warning">
                    <span>发布日期</span>
                  </el-badge>

                  <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                      点我查看
                      <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item class="clearfix">
                        评论
                        <el-badge class="mark" :value="12" />
                      </el-dropdown-item>
                      <el-dropdown-item class="clearfix">
                        回复
                        <el-badge class="mark" :value="3" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  </div>
                </el-card>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
      <!-- 二维码 -->
      <el-main class="richScan">
        <div>
          <img :src="img1Url" />
          <img :src="img2Url" />
          <img :src="img3Url" />
        </div>
      </el-main>

      <!-- 备案号 -->
      <el-footer>
        <div>
          <div class="bom">豫ICP备2020035100号</div>
          <div class="bim">
            <img src="../assets/备案图标(1).png" alt />
            <a
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41142202000050"
              style="
                display: inline-block;
                text-decoration: none;
                height: 20px;
                line-height: 20px;
              "
            >
              <p style="float: left; margin: 0px 0px 0px 5px; color: #939393">
                豫公网安备 41142202000050号
              </p>
            </a>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      // 二维码图片
      img1Url: require("../assets/123.png"),
      img2Url: require("../assets/112.png"),
      img3Url: require("../assets/111.png"),
      // 图片地址数组
      imagesbox: [
        { id: 0, idView: require("@/assets/1.jpg") },
        { id: 1, idView: require("@/assets/2.jpg") },
        { id: 2, idView: require("@/assets/3.jpg") },
        { id: 3, idView: require("@/assets/4.jpg") },
        { id: 4, idView: require("@/assets/5.jpg") },
        { id: 5, idView: require("@/assets/6.jpg") },
      ],

      formInline: {
        user: "",
        region: "",
      },

      //文章缩略图
      fits: ["scale-down"],
      urlone:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      urltwo:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      urlthree:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (400 / 1920) * this.screenWidth;
    },
    onSubmit() {
      console.log("submit!");
    },
    NewsHotspot() {
      this.$router.push("/NewsHotspot");
    },
    CompanyDynamics() {
      this.$router.push("/CompanyDynamics");
    },
    BigBrother() {
      this.$router.push("/BigBrother");
    },
    UnderstandUs() {
      this.$router.push("/UnderstandUs");
    },
    Login(){
      this.$router.push("/Login")
    },
    Photo(){
      this.$router.push("/ArticleRecommend")
    },
    Phototwo(){
      this.$router.push("/ArticleRecommend")
    },
    Photothree(){
      this.$router.push("/ArticleRecommend")
    }
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 30px;
}

.slideshow {
  text-align: center;
  background-color: skyblue;
}

/* 去除main下面的滚动条 */
.el-main {
  overflow: hidden;
}

.content {
  background-color: white;
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  min-height: calc(100vh - 120px);
  padding: 0px;
}

.richScan {
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-button {
  float: right;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 文章栏大框框 */
.box-cardone {
  width: 65%;
  height: 200px;
  margin-top: 3px;
}

/* 文章标题卡片 */
.articletext {
  font-size: 14px;
}
/* 文章标题简介卡片 */
.box-card {
  width: 73%;
  height: 160px;
  float: right;
}
.quantity {
  width: 100%;
  height: 50px;
}
.item {
  margin-top: 30px;
  margin-right: 3%;
  margin-left: 7%;
  width: 11%;
  font-size: 10px;
  
}

/* 鼠标动文章标题简介卡片 */
.box-card:hover {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: 5px solid rgba(0, 0, 0, 0);
}

/* 周排行大框框 */
.ranking {
  height: 606px;
  width: 34%;
  float: right;
}

/* 周排行卡片 */
.box-cardrightone {
  width: 100%;
  height: 200px;
}
.box-cardrighttwo {
  width: 100%;
  height: 200px;
  margin-top: 3px;
}
.box-cardrightthree {
  width: 100%;
  height: 200px;
  margin-top: 3px;
}

/* 鼠标动图片 */
.el-image:hover {
  border: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: 5px solid rgba(0, 0, 0, 0);
}
/* 给阅读排行加上>> */
.more li::marker {
  content: ">>";
  color: black;
}
/* 使a链接变成黑色 */
.more a:link,
.more a:visited {
  color: black;
}
/* 排行榜居中 */
.el-breadcrumb {
  text-align: center;
}

/* 新闻热点外框 */
.news {
  height: 40px;
  width: 100%;
  float: left;
}
/* 新闻按钮框 */
.newsbtndiv {
  float: left;
  width: 10%;
  margin-left: 13.5%;
}
/* 新闻按钮 */
.newsbtn {
  width: 180%;
}

.newscord {
  float: left;
  width: 100%;
  height: 5rem;
}

/* 图片百分比 */
.image {
  width: 100%;
  height: 100%;
}

/* 备案号 */
.bom {
  text-align: center;
}
.bim {
  background-color: #b3c0d1;
}

.isRoot{
  float: left;
  text-decoration: none;
  padding: 0rem;
}

.loginbtn{
  margin-top: 0.6rem;
}


/* 用户名和头像设置 */
.el-dropdown-link{
  float: left;
}
.avatar{
  float: left;
}
</style>